<template>
  <div>
    <div class="recommend_item_warp">
      <div class="riw_detail_l">
        <div class="riw_l_title">推荐第1名</div>
        <div class="riw_hot_img_warp">
          <img v-for="itemHot in 3" :key="itemHot" class="detail_l_hot_img" src="../assets/icon/flames.png" alt="">
        </div>
      </div>
      <div class="riw_detail_r">
        <div class="riw_detail_r_title">大平房四层三房朝南带空中花园位置安静户型正气</div>
        <div class="riw_detail_r_info">
          <span>四室两厅/</span>
          <span>145.789m2/</span>
          <span>南/</span>
          <span>东方知音菀</span>
        </div>
        <div class="riw_detail_years">满五年</div>
        <div class="riw_detail_price">
          <span class="riw_detail_all_price">1234万</span>
          <span class="riw_detail_every">7894元/平</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecommendItem',
  components: {},
  props: {
    recommendItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {},
  create() {
  },
  mounted() {
  },
  methods: {},
}
</script>

<style scoped lang="scss">
@import "../assets/style/base";
  .recommend_item_warp{
    display: flex;
    border-bottom: 1px solid #dcdcdc;
    padding: pxTorem(30px) 0;
    .riw_detail_l{
      width: 30%;
      margin-right: 4%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: pxTorem(32px);
      color: #333333;
      .riw_l_title{
        margin-bottom: pxTorem(10px);
      }
      .detail_l_hot_img{
        width: pxTorem(40px);
        height: pxTorem(40px);
      }
    }
    .riw_detail_r{
      flex: 1;
      color: #333333;
      font-size: pxTorem(30px);
      .riw_detail_r_title{
      }
      .riw_detail_r_info{
        font-size: pxTorem(26px);
        padding: pxTorem(10px) 0;
      }
      .riw_detail_years{
        color: #e98f36;
        font-weight: 600;
        font-size: pxTorem(26px);
      }
      .riw_detail_price{
        .riw_detail_all_price{
          color: #ff0000;
          font-weight: bold;
          margin-right: pxTorem(20px);
        }
        .riw_detail_every{
          font-weight: bold;
        }
      }
    }
  }
</style>
